<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui,viewport-fit=cover" />
    <title>学习项目</title>
    <style type="text/css">
        .bangdan_top_filter {
             width: 100%;
             height: 54px;
             line-height: 54px;
             background-color: #fff;
             z-index: 8500;
             position: fixed;
             display: -webkit-box;
             display: -moz-box;
             display: -ms-flexbox;
             display: -webkit-flex;
             display: flex;
             -webkit-box-pack: justify;
             -moz-justify-content: space-between;
             -webkit-justify-content: space-between;
             justify-content: space-between;
             -webkit-box-align: center;
             -moz-align-items: center;
             -webkit-align-items: center;
             align-items: center;
             -webkit-box-direction: normal;
             -webkit-box-orient: horizontal;
             -moz-flex-direction: row;
             -webkit-flex-direction: row;
             flex-direction: row;
            }


        .bangdan_top_filter .left_aside, .bangdan_top_filter .right_aside {
             padding: 0 18px;
             font-size: 16px;
             color: #333;
        }

        .bangdan_top_filter .fee_check_con {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: justify;
            -moz-justify-content: space-between;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-flex: 0;
            -moz-flex-grow: 0;
            -webkit-flex-grow: 0;
            flex-grow: 0;
            margin: 0 auto;
            text-align: center;
            line-height: 55px;
        }
        .bangdan_top_filter .fee_check {
            display: none;
            width: 144px;
            height: 29px;
            line-height: 29px;
            border-radius: 16px;
            border: 1px solid #eb6262;
            position: relative;
            color: #eb6262;
        }

        .bangdan_top_filter .fee_check_con span {
            width: 75px;
            height: 29px;
            line-height: 29px;
            display: block;
            font-size: 16px;
            border: 1px solid transparent;
            border-radius: 16px;
            position: absolute;
            top: -1px;
        }

        .bangdan_top_filter .check {
            background-color: #eb6262;
            color: #fff;
        }
        .bangdan_top_filter .pay {
            left: -2px;
        }
        .bangdan_top_filter .free {
            right: -2px;
        }

    </style>
  </head>
  <body>
    

    <div id="bangdanTopFilter" class="bangdan_top_filter">
        <div class="left_aside" id="sort">分类</div>
        <div class="fee_check_con">
            <div class="fee_check" style="display: block;">
                <span class="pay check">付费</span>
                <span class="free no_check">免费</span>
            </div>
        </div>
        <div class="right_aside" id="sortType">筛选</div>
    </div>

  </body>
  <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
  <script>
    const vConsole = new VConsole()
    
    function judgeBrand(sUserAgent) {
        var isHuawei = sUserAgent.match(/huaweibrowser/i) == "huaweibrowser";
        var isQQ = sUserAgent.match(/mqqbrowser/i) == "mqqbrowser";
        var isUC = sUserAgent.match(/ucbrowser/i) == "ucbrowser";
        // var isHuawei = sUserAgent.match(/huaweibrowser/i) == "huaweibrowser";
        // var isHuawei = sUserAgent.match(/huaweibrowser/i) == "huaweibrowser";
        console.log(sUserAgent)
        if (isHuawei) {
            return 'huaweibrowser';
        } else if (isQQ) {
            return 'qqbrowser';
        } else if (isUC) {
            return 'ucbrowser';
        } else {
            return 'default'
        }
    }
   var brand = judgeBrand(navigator.userAgent.toLowerCase());
   console.log(brand + '------------------')
  </script>
</html>